<template>
  <div class="app-container">
    <div class="app-main">
      <div class="mainName">预警模块</div>
      <el-form :model="queryParams" ref="queryForm" size="small" label-width="100px" class="formSty">
        <el-row>
          <el-col :span="6">
            <el-form-item label="任务单编号" prop="taskApplyCode">
              <el-input v-model="queryParams.taskApplyCode" placeholder="请输入" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="信息来源" prop="informationSource">
              <el-select v-model="queryParams.informationSource" size="small" placeholder="请选择">
                <el-option value="1" label="信息1"></el-option>
                <el-option value="2" label="信息2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="施工日期">
              <el-date-picker
                v-model="constructionDate"
                format="yyyy-MM-dd"
                @change="changeConstructionDate"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位名称" prop="householdUnitName">
              <el-input v-model="queryParams.householdUnitName" placeholder="请输入" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="查勘日期">
              <el-date-picker
                v-model="checkDate"
                format="yyyy-MM-dd"
                @change="changeCheckDate"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="受理日期">
              <el-date-picker
                v-model="acceptanceTime"
                format="yyyy-MM-dd"
                @change="changeAcceptanceTime"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地址" prop="address">
              <el-input v-model="queryParams.address" placeholder="请输入" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人" prop="householdContacts">
              <el-input v-model="queryParams.householdContacts" placeholder="请输入" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="householdPhone">
              <el-input v-model="queryParams.householdPhone" placeholder="请输入" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18" style="text-align: right">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table v-loading="loading" :data="list" border stripe :key="1">
        <el-table-column label="序号" align="center" type="index"></el-table-column>
        <el-table-column label="单位名称" align="center" prop="companyName"/>
        <el-table-column label="组织机构代码（统一社会信用代码）" align="center" prop="orgCode" min-width="220"/>
        <el-table-column label="单位总人数" align="center" prop="peopleTotal"/>
        <el-table-column label="归属行政区" align="center" prop="belongRegion"/>
        <el-table-column label="注册日期" align="center" prop="registerDate"/>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        class="pagination-container"
      />
    </div>
  </div>
</template>
<script>
import { companyFileQuery } from "@/api/manage/approval";
export default {
  name: "warning",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskApplyCode: "",
        informationSource: "",
        belongRegion: "",
        householdUnitName: "",
        address: "",
        householdContacts: "",
        householdPhone: "",
        constructionDateStart: "",
        constructionDateEnd: "",
        checkDateStart: "", // 查勘-日期开始
        checkDateEnd: "", // 查勘-日期结束
        acceptanceTimeStart: "", // 受理时间开始
        acceptanceTimeEnd: "" // 受理时间结束
      },
      constructionDate: [],
      checkDate: [],
      acceptanceTime: [],
      loading: false,
      list: [],
      total: 0,
      areaList: [
        { value: "浦东新区", label: "浦东新区" },
        { value: "崇明区", label: "崇明区" },
        { value: "奉贤区", label: "奉贤区" },
        { value: "青浦区", label: "青浦区" },
        { value: "松江区", label: "松江区" },
        { value: "金山区", label: "金山区" },
        { value: "嘉定区", label: "嘉定区" },
        { value: "闵行区", label: "闵行区" },
        { value: "宝山区", label: "宝山区" },
        { value: "杨浦区", label: "杨浦区" },
        { value: "徐汇区", label: "徐汇区" },
        { value: "普陀区", label: "普陀区" },
        { value: "长宁区", label: "长宁区" },
        { value: "静安区", label: "静安区" },
        { value: "虹口区", label: "虹口区" },
        { value: "黄浦区", label: "黄浦区" }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      companyFileQuery(this.queryParams)
        .then(res => {
          console.log(res, "23232");
          if (res.errorCode == "000000") {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleQuery() {
      this.getList();
    },
    changeConstructionDate(val) {
      this.queryParams.constructionDateStart = val[0];
      this.queryParams.constructionDateEnd = val[1];
    },
    changeCheckDate(val) {
      this.queryParams.checkDateStart = val[0];
      this.queryParams.checkDateEnd = val[1];
    },
    changeAcceptanceTime(val) {
      this.queryParams.acceptanceTimeStartt = val[0];
      this.queryParams.acceptanceTimeEnd = val[1];
    }
  }
};
</script>
<style lang="scss" scoped>
.app-main {
  background-color: #fff;
  // padding: 15px 20px;
  border-radius: 8px;
  .mainName {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    color: #000000;
    border-bottom: 1px solid #dcdfe6;
    margin-bottom: 10px;
  }
  .btnGroup {
    text-align: right;
    margin: 15px 0;
  }
}
.formSty {
    ::v-deep .el-select {
      width: 100%;
    }
    ::v-deep .el-input {
      width: 100%;
    }
    ::v-deep .el-date-editor {
      width: 100%;
    }
}
</style>